<template>
  <div class="signup">
      <div class="signupBox">
          <nuxt-link to="/">
            <img src="/static/images/logo.png" class="signuoLogo" />
          </nuxt-link>
          <div class="signupMain">
            <div class="signuTit">
              <nuxt-link :to="{name: 'signup', query: {type: 'login'}}" :class="{active: signupType === 'login'}">登陆</nuxt-link>
              <nuxt-link :to="{name: 'signup', query: {type: 'reg'}}" :class="{active: signupType === 'reg'}"> 注册</nuxt-link>
            </div>
          </div>
          <div class="signupContent">
            <div class="signuLogin" v-if="signupType === 'login'">
              <login-moudel></login-moudel>
            </div>
            <div class="signuReg" v-if="signupType === 'reg'">
              <reg-moudel></reg-moudel>
            </div>
          </div>
      </div>
      <div class="loginfo">
        <p><nuxt-link to="/">《用户协议》</nuxt-link></p>
      </div>
  </div>
</template>

<script>
import loginMoudel from '@/components/loginMoudel.vue'
import regMoudel from '@/components/regMoudel.vue'
export default {
  watchQuery:['type'],
  async asyncData({ store, query }) {
    let signupType = query.type || 'login';
    return {
      signupType
    };
  },
  data() {
    return {
    };
  },
  components: {
    loginMoudel, regMoudel
  },
  methods: {
  }
}
</script>